<!--
 * @Author: scihi.mr
 * @Date: 2022-03-31 13:40:43
 * @LastEditors: scihi.mr
 * @LastEditTime: 2022-03-31 13:40:44
 * @Description: file content
-->
<!--
 * @Author: scihi.mr
 * @Date: 2022-03-31 13:39:31
 * @LastEditors: scihi.mr
 * @LastEditTime: 2022-03-31 13:39:31
 * @Description: file content
-->
<template>
  <view
    :id="wavesId"
    class="waves"
    :class="itemClass"
    @tap="onTap"
    @touchstart="onTouchstart($event)"
  >
    <slot></slot>
    <view
      class="waves-ripple"
      :class="{ active: active }"
      :style="{
        top: rippleTop + 'px',
        left: rippleLeft + 'px',
        width: field.finalWidth + 'px',
        height: field.finalWidth + 'px',
        'background-color': wavesColor,
      }"
    ></view>
  </view>
</template>

<script>
let wavesId = 0;
export default {
  props: {
    wavesColor: {
      type: String,
      default: "rgba(255, 255,255, 0.5)",
    },
    itemClass: {
      type: String,
      default: "",
    },
  },
  data() {
    wavesId++;
    return {
      rippleTop: 0,
      rippleLeft: 0,
      field: {},
      active: Boolean,
      timer: null,
      num: 0,
      wavesId: "waves_" + wavesId,
    };
  },
  methods: {
    onTap(e) {
      // 点击事件
      this.$emit("onTap");
    },
    onTouchend() {
      clearInterval(this.timer);
    },
    onTouchstart(e) {
      // 触碰事件 触发波纹
      this.active = false;
      this.$nextTick(() => {
        this.activeWaves(e);
      });
      // this.num=0
      // this.timer= setInterval(()=>{
      // 	this.active = false;
      // 	this.num += 1;
      // 	if(this.num>=8){
      // 		clearInterval(this.timer)
      // 	}
      // 	this.$nextTick(() => {
      // 		this.activeWaves(e);
      // 	});
      // },1500)
    },
    activeWaves(e) {
      this.getClientRect().then((data) => {
        if (!data.height) {
          return;
        }
        data.finalWidth = data.height > data.width ? data.height : data.width;
        if (!data.finalWidth) {
          return;
        }
        this.field = data;
        let touchesX;
        let touchesY;
        // #ifdef MP-BAIDU
        touchesX = e.changedTouches[0].clientX;
        touchesY = e.changedTouches[0].clientY;
        // #endif
        // #ifdef MP-ALIPAY
        touchesX = e.detail.clientX;
        touchesY = e.detail.clientY;
        // #endif
        // #ifndef MP-BAIDU || MP-ALIPAY
        touchesX = e.touches[0].clientX;
        touchesY = e.touches[0].clientY;
        // #endif
        this.rippleTop = touchesY - data.top - data.finalWidth / 2;
        this.rippleLeft = touchesX - data.left - data.finalWidth / 2;
        this.$nextTick(() => {
          this.active = true;
        });
      });
    },
    getClientRect() {
      return new Promise((callback) => {
        let query = uni.createSelectorQuery().in(this);
        let id = "#" + this.wavesId;
        query
          .select(id)
          .boundingClientRect((data) => {
            callback(data);
          })
          .exec();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.waves {
  position: relative;
  overflow: hidden;

  .waves-ripple {
    position: absolute;
    border-radius: 100%;
    background-clip: padding-box;
    pointer-events: none;
    user-select: none;
    transform: scale(0);
    opacity: 1;
  }

  .active {
    opacity: 0;
    transform: scale(2);
    transition: opacity 1.2s ease-out, transform 0.5s ease-out;
  }
}
</style>
